

.tile-area {
  background: url(../img/meteor-bg.jpg) fixed;
}

.tile-area-title img {
  width: 60px;
}

.tile-area-controls {
  position: fixed;
  right: 40px;
  top: 40px;
}

.tile-group {
  //left: 100px;
}

.grid-container {
  position: absolute;
  top: 66px;
  left: 0;
  right: 10px;
  bottom: 0;
  overflow-x: auto;
  overflow-y: hidden;
}

.grid {
  position: relative;
  height: 100%;
  list-style: none;
  /* Will be modified by the grid jquery lib, depending on the items */
  -webkit-transition: width 0.2s;
  margin: 20px 70px;
  padding-bottom: 30px;

  li {
    position: absolute;
    z-index: 1;
    cursor: pointer;
    -webkit-transition: top 0.2s,
                        left 0.2s,
                        width 0.2s,
                        height 0.2s,
                        font-size 0.2s,
                        line-height 0.2s;

    .inner {
      position: absolute;
      top: 0;
      bottom: 10px;
      left: 10px;
      right: 0;
      -webkit-transition: background 3s;
    }

    &.changed .inner {
      -webkit-transition: none;
    }
    &.ui-draggable-dragging {
      -webkit-transition: none;
    }
    &.position-highlight {
      -webkit-transition: none;
    }
    &.position-highlight .inner {
      border: none;
      background: rgba(255,255,255,0.05);
    }
  }
}
